<template>
  <div>
    <div class="subject" v-for="item in 5" :key="item">
      <span>{{ num1 }}</span>
      <span>+</span>
      <span>{{ num2 }}</span>
      <span>=</span>
      <input type="number" v-model="sum" />
      <button @click="all">提交</button>
    </div>
    <MyFlag :flag="this.sum == this.num1 + this.num2"></MyFlag>
  </div>
</template>

<script>
import MyFlag from "./MyFlag.vue";
export default {
  data() {
    return {
      num1: Math.floor(Math.random() * 10),
      num2: Math.floor(Math.random() * 10),
      sum: "",
    };
  },
  methods: {
    // all() {
    //   const flag = this.sum == this.num1 + this.num2;
    //   //   this.$emit("count", flag);
    // },
    bijiao(flag) {
      if (flag === this.done) {
        this.done = true;
        console.log(this.done);
      } else {
        this.done = false;
        console.log(this.done);
      }
    },
  },
  components: {
    MyFlag,
  },
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>
